<template>
  <view class="account">
    <view class="account-content">
      <view class="uni-flex uni-align-center uni-justify-between titleBox">
        <view class="title">{{ type ? '提现至' : '充值方式' }}</view>
        <view class="bankcard uni-flex uni-align-center"  @click="showBankcard">中国建设银行银行卡<uni-icons type="right" size="15"
            style="margin-left:24rpx;" color="#666666"></uni-icons></view>
      </view>
      <view>
        <view class="price_title">{{ type ? '提现' : '充值' }}金额</view>
        <view class="uni-flex uni-align-center priceBox"><text class="priceunit">¥</text><input class="price" type="text"
            :placeholder="type ? '请输入提现金额' : '请输入充值金额'" /></view>
        <view v-if="type" class="uni-flex uni-justify-between uni-align-center">
          <view class="price_limit">可提现金额<text class="price_limitNum">10000.00</text></view>
          <view class="max">全部提现</view>
        </view>
        <view v-if="!type" class="price_limit">该卡本次最多可充值<text class="price_limitNum">10000.00</text></view>
      </view>
    </view>
    <view class="button" @click="submit('valiForm')">提现</view>
    <!-- <view v-if="!type" class="button" @click="submit('valiForm')">确认充值</view>
    <view v-if="type" class="button" @click="submit('valiForm')">2小时到账，确认提现</view>
    <view class="banner" v-if="!type">
      <image :src="`${$ImgBaseUrl}account_banner.png`" mode="widthFix" class="bannerImg" />
    </view> -->
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { withdrawal } from "@/api/extract.js";

const type = ref(0)


const showBankcard = () => {
  uni.navigateTo({
    url: "/pages/personalCenter/Universal/BankCard"
  });
}
const submit = () => {
  withdrawal().then((res) => {
    if (res.code == 200) {
      const data = res?.data
      if (wx.canIUse('requestMerchantTransfer')) {
        wx.requestMerchantTransfer({
          mchId: data?.mchId,
          // appId: wx.getAccountInfoSync().miniProgram.appId,
          appId: data?.appId,
          package: data?.result?.packageInfo,
          success: (res) => {
            // res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
            console.log('success:', res);
            uni.showToast({
              title: "提现成功",
              icon: "success"
            });
          },
          fail: (res) => {
            console.log('fail:', res);
          },
        });
      } else {
        wx.showModal({
          content: '你的微信版本过低，请更新至最新版本。',
          showCancel: false,
        });
      }
    }
  })
}

onLoad((option) => {
  console.log(option)
  type.value = Number(option.type);
  const title = option.type == 1 ? '余额提现' : '余额充值';
  console.log(title)
  uni.setNavigationBarTitle({
    title: title
  });
})


</script>

<style lang="scss" scoped>
.account {
  padding: 26rpx 24rpx;
  background: #F5F5F5;
  min-height: calc(100vh - 52rpx);

  .account-content {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 0 23rpx 34rpx;

    .titleBox {
      padding: 40rpx 0;
      border-bottom: 1px solid #E2E2E2;
    }

    .title {
      font-weight: 500;
      font-size: 28rpx;
      color: #303133;
    }

    .bankcard {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }

    .price_title {
      font-weight: 500;
      font-size: 28rpx;
      color: #303133;
      margin: 34rpx 0;
    }

    .priceunit {
      font-size: 30rpx;
      color: #303133;
    }

    .priceBox {
      padding-bottom: 9rpx;
      border-bottom: 1px solid #E2E2E2;

      .price {
        margin-left: 12rpx;
        font-size: 50rpx;
        color: #303133;
      }
    }

    .price_limit {
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
      margin-top: 25rpx;

      .price_limitNum {
        color: #2F80ED;
      }
    }

    .max {
      font-weight: 400;
      font-size: 28rpx;
      color: #FF6A47;
      margin-top: 25rpx;
    }
  }
}

.button {
  width: 86%;
  height: 88rpx;
  background: #CAE1FF;
  border-radius: 44rpx;
  text-align: center;
  font-weight: 600;
  font-size: 30rpx;
  color: #FFFFFF;
  line-height: 88rpx;
  margin: 78rpx auto 54rpx;
}

.button_active {
  background: #2F80ED;
}

.bannerImg {
  width: 100%;
}
</style>